<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>新东方顶部导航菜单</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			.div1{
				width: 800px;
				height: 500px;
				margin: 40px auto;
				border: 1px #000000 solid;
			}
			.div2{
				width: 800px;
				height: 50px;
				background-color:rgba(88,88,88,0.5);
			}
			.div2 li{
				list-style-type: none;
				display: inline;
				padding-left: 30px;
				padding-right: 30px;
				
			}
			.div2 li a{
				text-decoration: none;
			}
			.div3{
				margin-top: -27px;
				margin-left: 80px;
				
			}
			.div4{
				width: 350px;
				height: 200px;
				border: 1px #000000 solid;
				position: absolute;
				top: 80px;
				right: 310px;
				background-color: white;
			}
			.div5{
				border-bottom: 1px #000000 dashed;
				
			}
			.div5 li{
				list-style-type: none;
				display: inline;
				padding-left: 20px;
				padding-right: 20px;
				
			}
			.div5 li a{
				line-height: 40px;
				text-decoration: none;
			}
			
			
			
			
		</style>
	</head>
	<body>
		<div class="div1">
			<div class="div2">
				<img src="img/jieda/logo.gif"style="padding-top: 12px;"  />
				<div class="div3">
				<ul>
					<li><a href="#" /> 购物车    </a></li>
					<li><a href="#" /> 优惠劵    </a></li>
					<li><a href="#" /> 快速注卡    </a></li>
					<li><a href="#" /> 各地够课  </a></li>
					<li><a href="#" /> 手机报    </a></li>
					<li><a href="#" /> 网站导航 <img src="img/jieda/open_icon.gif"  /></a></li>
					
				</ul>
				</div>
			</div>
			<!--负责显示下拉框-->
			<div class="div4">
				<div class="div5">
					<ul>
					<li><a href="#" /> 托福    </a></li>
					<li><a href="#" /> 雅思    </a></li>
					<li><a href="#" /> 考研    </a></li>
					<li><a href="#" /> 职称英语    </a></li>
					<li><a href="#" />  初中    </a></li>
					<li><a href="#" /> 日语    </a></li>
					
					</ul>
				</div>
				<div class="div5">
					<ul>
					<li><a href="#" /> 网络课堂   </a></li>
					<li><a href="#" /> 资讯中心    </a></li>
					<li><a href="#" /> 知识堂    </a></li>
					<li><a href="#" /> 大师讲坛    </a></li>
					<li><a href="#" />  学习论坛    </a></li>
					<li><a href="#" /> 学词    </a></li>
					<li><a href="#" /> 考研搜校    </a></li>
					
					</ul>
					
				</div>
				<div class="div5" style="border: none;">
					<ul>
					<li><a href="#" /> M-Zone    </a></li>
					<li><a href="#" /> 手机报    </a></li>
					<li><a href="#" /> 时时英语    </a></li>
					
					</ul>
					
				</div>
				
			</div>
			
			
			
		</div>
		
		
		
	</body>
</html>
